<template>
  <div>
    <div class="topSearchEight">
      <div class="topSearchEightLeft">
        <div>
          <p>订单号:</p>
          <el-input
            :style="{ width: '200px', marginLeft: '20px' }"
            v-model="orderCode"
            placeholder="订单号"
            clearable
          ></el-input>
        </div>
        <div>
          <p>买家账号:</p>
          <el-input
            :style="{ width: '200px', marginLeft: '20px' }"
            v-model="account"
            placeholder="请输入要查询的买家账号"
            clearable
          ></el-input>
        </div>
        <div>
          <p>日期选择:</p>
          <el-date-picker
            v-model="searchBeginTime"
            class="input-with-select"
            placeholder="请输入开始日期"
            style="width: 200px; margin-left: 20px"
          ></el-date-picker>
          <el-date-picker
            v-model="searchEndTime"
            class="input-with-select"
            placeholder="请输入结束日期"
            style="width: 200px; margin-left: 10px"
          ></el-date-picker>
        </div>
      </div>
      <div class="topSearchEightRight">
        <el-button
          type="primary"
          :style="{ marginLeft: '20px' }"
          @click="searchOrder"
        >
          查询
        </el-button>
        <el-button :style="{ marginLeft: '20px' }" @click="clearAll">
          重置
        </el-button>
      </div>
    </div>
    <div class="ordershipped">
      <div class="SecondRow">
        <div class="SecondRowLeft">
          <!-- <el-button
            :disabled="isButtonDisabled"
            size="medium"
            @click="clearAll"
          >
            清空
          </el-button> -->
        </div>
        <div class="SecondRowRight">
          <el-button type="primary" plain> 导出 </el-button>
          <el-button circle icon="el-icon-refresh-right" @click="searchOrder">
          </el-button>
          <!-- <el-button round size="mini" @click="addgoods">添加商品</el-button> -->
        </div>
      </div>

      <div class="DataTableDiv">
        <el-table
          v-loading="searchOrderloading"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="SelloutData"
          border
          style="width: 100%"
          empty-text="暂无数据"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" min-width="65"> </el-table-column>
          <el-table-column fixed label="排序" prop="sort" min-width="80">
            <template slot-scope="scope">
              <div class="flex-container">
                <span class="flex-item">
                  <!-- 序号 -->
                  {{ scope.$index + 1 }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="buyerName" label="用户" min-width="100">
          </el-table-column>
          <el-table-column prop="account" label="买家账号" min-width="200">
          </el-table-column>
          <el-table-column prop="orderCode" label="订单号" min-width="270">
          </el-table-column>
          <el-table-column prop="orderTime" label="下单时间" min-width="200">
          </el-table-column>
          <el-table-column label="实付款" min-width="124">
            <template slot-scope="prop">
              <span>{{ prop.row.paidAmount / 100 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单状态" min-width="141">
            <!-- ///{ name: "待付款", value: 1 }, -->
            <!-- { name: "待审核", value: 2 },
        { name: "待发货", value: 3 },
        { name: "待收货", value: 4 },
        { name: "待评价", value: 5 },
        { name: "已完成", value: 6 },
        { name: "已驳回", value: 7 },
        { name: "已取消", value: 8 },
        { name: "退款完成", value: 9 }, -->
            <template slot-scope="prop">
              <span
                class=""
                style="color: #606266"
                v-if="prop.row.orderStatus == 8"
                >已取消</span
              >
              <span class="" style="color: red" v-if="prop.row.orderStatus == 3"
                >待发货</span
              >
              <span class="" style="color: red" v-if="prop.row.orderStatus == 1"
                >待付款</span
              >
              <span class="" style="color: red" v-if="prop.row.orderStatus == 2"
                >待审核</span
              >
              <span class="" style="color: red" v-if="prop.row.orderStatus == 4"
                >待收货</span
              >
              <span
                class=""
                style="color: #ecab3c"
                v-if="prop.row.orderStatus == 5"
                >待评价</span
              >
              <span
                class=""
                style="color: #67c23a"
                v-if="prop.row.orderStatus == 6"
                >已完成</span
              >
              <span class="" style="color: red" v-if="prop.row.orderStatus == 7"
                >已驳回</span
              >
              <span
                class=""
                style="color: #e6a23c"
                v-if="prop.row.orderStatus == 9"
                >退款完成</span
              >
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="260">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看详情</el-button
              >
              <!-- <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看详情</el-button
              >
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看详情</el-button
              > -->
            </template>
          </el-table-column>
          <!-- <div slot="empty">暂无数据</div> -->
        </el-table>
      </div>
      <div class="paging" v-if="total > 0">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 添加/修改商品组件 -->
    <OrderModel
      v-show="centerDialogVisible"
      :centerDialogVisible="centerDialogVisible"
      :currentRow="detailOrder"
      @cancelgoodesmodel="cancelgoodesmodel"
    />
  </div>
</template>
<script>
import {
  orderPageListForSeller,
  getOrderDetails,
} from "@/api/mallApi/congLinMall";
import OrderModel from "@/views/mall/managementend/ordergoods/order-manage/order-model.vue";
export default {
  name: "AllOrders",
  components: {
    OrderModel,
  },
  created() {
    this.orderPageListForSeller();
    // this.getOrderDetails();
  },
  data() {
    return {
      form: {},
      orderCode: "", //订单号
      account: "", //买家账户
      orderStatus: null, //订单状态
      searchBeginTime: "", //开始时间
      searchEndTime: "", //结束时间
      searchOrderloading: false,
      //添加/修改 商品弹窗
      centerDialogVisible: false,
      currentRow: {}, // 保存当前行数据
      AttributesSelect: [
        { name: "待付款", value: 1 },
        { name: "待审核", value: 2 },
        { name: "待发货", value: 3 },
        { name: "待收货", value: 4 },
        { name: "待评价", value: 5 },
        { name: "已完成", value: 6 },
        { name: "已驳回", value: 7 },
        { name: "已取消", value: 8 },
        { name: "退款完成", value: 9 },
      ],
      SelloutData: [],
      selectedRows: [], //表格 多选内容
      isButtonDisabled: false, //checkbox 联动按钮
      currentPage: 1, //分页
      pageSize: 10, //,每页显示条数
      total: 0,
      detailOrder: {},
    };
  },
  methods: {
    copyToClip(content) {
      var aux = document.createElement("textarea");
      aux.value = content;
      document.body.appendChild(aux);
      aux.select();
      document.execCommand("copy");
      document.body.removeChild(aux);
      Vue.prototype.$message({
        message: "复制成功",
        type: "success",
      });
    },
    //订单详情
    getOrderDetails(aaa) {
      getOrderDetails(aaa)
        .then((res) => {
          this.searchOrderloading = false;
          console.log("订单详情", res);
          this.detailOrder = res.data;
        })
        .catch(() => {
          this.searchOrderloading = false;
        });
    },
    orderPageListForSeller() {
      this.searchOrderloading = true;
      let reqData = {
        type: 2,
        isPage: 1,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        orderCode: this.orderCode, // 订单号
        account: this.account, //买家账号
        orderStatus: 1, // 订单状态
        searchBeginTime: this.searchBeginTime,
        searchEndTime: this.searchEndTime,
      };
      orderPageListForSeller(reqData)
        .then((res) => {
          this.searchOrderloading = false;
          console.log("所有订单", res);
          this.SelloutData = res.data.list;
          this.total = Number(res.data.total);
        })
        .catch(() => {
          this.searchOrderloading = false;
        });
    },
    searchOrder() {
      this.orderPageListForSeller();
    },
    clearAll() {
      this.orderCode = "";
      this.account = "";
      this.orderStatus = "";
      this.searchBeginTime = "";
      this.searchEndTime = "";
      this.orderPageListForSeller();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.orderPageListForSeller();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.orderPageListForSeller();
    },
    //属性的多选框 点击事件请求
    changeAttHandle(scope) {
      // 在这里可以直接获取更新后的选中状态
      const checkedAttributes = scope.row.TableAttribute.filter(
        (item) => item.checked
      );
      console.log("选中的属性值：", scope, checkedAttributes);
      // 进行相应的请求或处理逻辑
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection;
      console.log("选中的行数据：", this.selectedRows);
      // 在这里进行相应的操作，如发起请求等
    }, //表格多选
    handleClick(row) {
      // 点击编辑按钮时触发
      this.currentRow = row; // 将当前行数据保存起来
      console.log("row", row);
      let aaa = {
        orderCode: row.orderCode,
      };
      this.getOrderDetails(aaa);
      this.centerDialogVisible = true; // 打开弹窗
    },
    cancelgoodesmodel(data) {
      // 弹窗关闭时触发，可以在这里重置数据或进行其他操作
      this.currentRow = {};
      this.centerDialogVisible = data;
      this.enterType = 0;
    },
  },
  watch: {
    selectedRows: {
      handler(newValue) {
        // 数组发生变化时，isButtonDisabled计算属性会重新计算，从而更新按钮的禁用状态
        console.log("123", newValue);
        if (newValue.length === 0) {
          this.isButtonDisabled = true;
        } else {
          this.isButtonDisabled = false;
        }
      },
      deep: true,
      immediate: true, // 立即执行处理函数
    },
  },
};
</script>

<style scoped lang="scss">
.topSearchEight {
  width: 98%;
  margin: 1%;
  background-color: #fff;
  min-height: 75px;
  display: flex;
  justify-content: space-between;
  .topSearchEightLeft {
    width: 1100px;
    display: flex;
    margin-left: 10px;
    > div {
      display: flex;
      align-items: center;
      margin-left: 10px;
      p {
        font-size: 14px;
      }
    }
  }
  .topSearchEightRight {
    width: 200px;
    display: flex;
    align-items: center;
  }
}
.ordershipped {
  // display: flex;
  // flex-direction: column;
  // align-content: center;
  // justify-content: center;
  width: 98%;
  min-height: 750px;
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: 1%;
  background-color: #fff;
  overflow: hidden;

  .SecondRow {
    width: 100%;
    min-height: 65px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .SecondRowLeft {
      margin-top: 10px;
      margin-left: 25px;
    }
    .SecondRowRight {
      margin-top: 10px;
      margin-right: 30px;
    }
  }
  .DataTableDiv {
    width: 98%;
    margin-left: 1%;
    margin-bottom: 15px;
    // border: 1px solid #dcdee2;
    // > div:nth-child(1) {
    //   padding: 10px;
    // }
    //表格
    .flex-container {
      display: flex;
      align-items: center; /* 垂直居中 */
      justify-content: space-around;
      > img {
        width: 70px;
        height: 70px;
      }
    }
    // .TableAttrTem {
    //   display: flex;
    //   align-items: center;
    //   justify-content: space-around;
    // }
  }
  .paging {
    width: 99%;
    height: 50px;
    // background-color: antiquewhite;
    display: flex;
    align-items: end;
    justify-content: end;
  }
}
</style>
